﻿@using Smartstore.Admin.Models.Security
@using Smartstore.Core.Security

@model GoogleRecaptchaModel

@{
    ViewBag.Title = "Google reCAPTCHA";
    Layout = "_AdminPopupLayout";
}

<form asp-action="GoogleRecaptcha" asp-route-btnId="@ViewBag.BtnId">
    <div class="section-header">
        <div class="title">
            <img src="https://www.gstatic.com/images/icons/material/product/2x/recaptcha_48dp.png" height="32" />
            @ViewBag.Title
        </div>
        <div class="options">
            <button type="submit" name="save" value="save" class="btn btn-warning">
                <i class="fa fa-check"></i>
                <span>@T("Admin.Common.Save")</span>
            </button>
            <button type="submit" name="save" value="save-continue" class="btn btn-secondary">
                <span>@T("Admin.Common.SaveContinue")</span>
            </button>
        </div>
    </div>

    @await Component.InvokeAsync("StoreScope")

    <div asp-validation-summary="All"></div>

    <div class="alert alert-info w-100 alert-dismissible">
        @Html.Raw(T("Admin.Configuration.Settings.GeneralCommon.GoogleRecaptcha.Info"))
        <button type="button" class="btn-close" data-dismiss="alert"></button>
    </div>

    <div class="adminContent">
        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="SiteKey" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="SiteKey"></setting-editor>
                <span asp-validation-for="SiteKey"></span>
            </div>
        </div>
        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="SecretKey" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="SecretKey"></setting-editor>
                <span asp-validation-for="SecretKey"></span>
            </div>
        </div>
        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="Version" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="Version">
                    <select asp-for="Version" asp-items="ViewBag.AvailableVersions"></select>
                </setting-editor>
                <span asp-validation-for="Version"></span>
            </div>
        </div>
        <div class="adminRow d-none" data-version="v2">
            <div class="adminTitle">
                <smart-label asp-for="Size" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="Size">
                    <select asp-for="Size" asp-items="ViewBag.AvailableSizes"></select>
                </setting-editor>
                <span asp-validation-for="Size"></span>
            </div>
        </div>
        <div class="adminRow d-none" data-version="v2" id="pnl-use-dark-theme">
            <div class="adminTitle">
                <smart-label asp-for="UseDarkTheme" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="UseDarkTheme"></setting-editor>
            </div>
        </div>
        <div class="adminRow d-none" data-version="v2" id="pnl-badge-position">
            <div class="adminTitle">
                <smart-label asp-for="BadgePosition" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="BadgePosition">
                    <select asp-for="BadgePosition" asp-items="ViewBag.AvailableBadgePositions"></select>
                </setting-editor>
                <span asp-validation-for="BadgePosition"></span>
            </div>
        </div>
        <div class="adminRow d-none" data-version="v3">
            <div class="adminTitle">
                <smart-label asp-for="HideBadgeV3" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="HideBadgeV3"></setting-editor>
            </div>
        </div>
        <div class="adminRow d-none" data-version="v3">
            <div class="adminTitle">
                <smart-label asp-for="ScoreThreshold" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="ScoreThreshold"></setting-editor>
                <span asp-validation-for="ScoreThreshold"></span>
            </div>
        </div>

        <hr />

        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="WidgetUrl" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="WidgetUrl" placeholder="@GoogleRecaptchaSettings.DefaultWidgetUrl" />
                <span asp-validation-for="WidgetUrl"></span>
            </div>
        </div>
        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="VerifyUrl" />
            </div>
            <div class="adminData">
                <setting-editor asp-for="VerifyUrl" placeholder="@GoogleRecaptchaSettings.DefaultVerifyUrl" />
                <span asp-validation-for="VerifyUrl"></span>
            </div>
        </div>
    </div>
</form>

<script sm-target-zone="scripts" data-origin="GoogleRecaptcha">
    $(function () {
        // Switch Version
        $('#@(Html.IdFor(x => x.Version))').on('change', function () {
            $('.adminRow[data-version="v2"]').toggleClass('d-none', $(this).val() == 'v3');
            $('.adminRow[data-version="v3"]').toggleClass('d-none', $(this).val() == 'v2');
            $('#@(Html.IdFor(x => x.Size))').trigger('change');
        }).trigger('change');

        // Show BadgePosition if v2/Size=invisible
        $('#@(Html.IdFor(x => x.Size))').on('change', function () {
            var isV3 = $('#@(Html.IdFor(x => x.Version))').val() == 'v3';
            $('#pnl-use-dark-theme').toggleClass('d-none', isV3 || $(this).val() == 'invisible');
            $('#pnl-badge-position').toggleClass('d-none', isV3 || $(this).val() != 'invisible');
		}).trigger('change');
    });
</script>